import React, { Component } from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import {
  Header as HeaderUI, Grid, Input, Button, Dropdown, Checkbox,
} from 'semantic-ui-react'
import Styled from 'styled-components'

const getOptions = values => values.map((v, i) => ({ key: i, value: v, text: v }))

const Edit = Styled.div`
flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(255,255,255,0.8);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
`

class TableView extends Component {
  state = { value: 'yes' }

  handleChange = (e, { value }) => this.setState({ value })

  render() {
    const {
      editTag,
      cancelEdit,
      actionEditTagChange,
      actionDoAndUpdate,
      actionTagChange,
    } = this.props
    const { value } = this.state
    if (!editTag.tag) {
      return null
    }
    return (
      <Edit>
        <Grid columns={1} stackable textAlign="center">
          <Grid.Row verticalAlign="middle">
            <Grid.Column>
              <HeaderUI>{editTag.tag.name}</HeaderUI>
              {(editTag.tag.config.tagType === 'string'
                || editTag.tag.config.tagType === 'number') && (
                <Input
                  value={editTag.value}
                  onChange={(e, { value }) => actionEditTagChange(value)}
                />
              )}
              {editTag.tag.config.tagType === 'enum' && (
                <Dropdown
                  options={getOptions(editTag.tag.config.values)}
                  item
                  selection
                  search
                  text={editTag.value}
                  onChange={(e, { value }) => actionEditTagChange(value)}
                />
              )}
              {editTag.tag.config.tagType === 'bool' && (
                <div>
                  <Checkbox
                    radio
                    checked={editTag.value === true}
                    label="是"
                    value
                    onChange={(e, { value }) => actionEditTagChange(value)}
                    style={{ marginRight: '2em' }}
                  />
                  <Checkbox
                    radio
                    checked={editTag.value === false}
                    label="否"
                    value={false}
                    onChange={(e, { value }) => actionEditTagChange(value)}
                  />
                </div>
              )}
            </Grid.Column>
          </Grid.Row>
          <Grid.Row verticalAlign="middle">
            <Grid.Column>
              <div>
                <Button
                  size="mini"
                  primary
                  disabled={editTag.value === editTag.initValue}
                  onClick={() => actionDoAndUpdate(null, actionTagChange, editTag.tag.name, editTag.value)
                  }
                >
                  保存
                </Button>
                <Button size="mini" basic color="blue" onClick={() => cancelEdit()}>
                  取消
                </Button>
              </div>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Edit>
    )
  }
}

const mapStateToProps = state => ({
  editTag: projectDuck.selectors.selectEditTag(state),
})

const mapDispatchToProps = {
  cancelEdit: projectDuck.creators.actionEditTagCancel,
  actionEditTagChange: projectDuck.creators.actionEditTagChange,
  actionDoAndUpdate: projectDuck.creators.actionDoAndUpdate,
  actionTagChange: projectDuck.creators.actionTagChange,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(TableView)
